<template>
	<view>
		<view class="nav-view config">
			<view class="cell avatar" @click="chooseImage">
				<view class="title">
					<image class="avatar-image" :src="userInfo.avatar"></image>
				</view>
				<text class="value text-ellipsis">更换头像</text>
				<view class="action">
					<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
				</view>
			</view>
		</view>
		
		<view class="nav-view config">
			
			<view class="cell" @click="bindNickname()">
				<view class="icon">
					<text class="iconfont">&#xe66a;</text>
				</view>
				<view class="title">昵 称</view>
				<text class="value text-ellipsis">{{userInfo.nickname}}</text>
				<view class="action">
					<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
				</view>
			</view>
			
			<view class="cell">
				<!--  #ifdef  MP-WEIXIN -->
				<button class="bind-mobile-btn" plain="true" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber"></button>
				<!-- #endif -->
				<!--  #ifdef  H5 -->
				<button class="bind-mobile-btn" plain="true" @click="bindMobile()"></button>
				<!-- #endif -->
				<view class="icon">
					<text class="iconfont">&#xe608;</text>
				</view>
				<view class="title">绑定手机号</view>
				<text class="value text-ellipsis">{{userInfo.mobile}}</text>
				<view class="action">
					<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
				</view>
				
			</view>
			<view class="cell" @click="bindEmail()">
				<view class="icon">
					<text class="iconfont">&#xe62a;</text>
				</view>
				<view class="title">绑定邮箱</view>
				<text class="value text-ellipsis">{{userInfo.email}}</text>
				<view class="action">
					<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
				</view>
			</view>
			
			<view class="cell" @click="bindRealname()">
				<view class="icon">
					<text class="iconfont">&#xe66b;</text>
				</view>
				<view class="title">真实姓名</view>
				<text class="value text-ellipsis">{{userInfo.realname}}</text>
				<view class="action">
					<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
				</view>
			</view>
		</view>
		
		<!--头像裁切-->
		<view v-show="cutShow">
			<tui-cropper-app ref="cutImage" lockRatio :width="width" :height="height" :imageUrl="cutImage" @cancle="cancleCut"
			 @cropper="cropper">
			</tui-cropper-app>
		</view>
	</view>
</template>

<script>
	import Base from '@/muu_activity/common/base.vue'
	
	import tuiCropperApp from "@/components/imagecut-upload/tui-image-cropper/tui-image-cropper.vue";
	export default {
		extends:Base,
		components: {
			tuiCropperApp,
		},
		data() {
			return {
				userInfo: {},
				// 裁剪显示
				cutShow: false,
				// 裁剪图片
				cutImage: "",
				// 完成图片
				overImage: [],
				// 添加图片区域
				addStatus: false,
				// 上传完成key
				uploadKey: [],
				// 裁剪框宽px
				width: 280,
				// 裁剪框高px
				height: 280,
			}
		},
		async onLoad(option) {
			await this.$onLaunched
			await this.baseIsReady()
		},
		created() {

		},
		onShow() {
			this.getUserInfo()
		},

		methods: {

			/**
			 * 获取用户详情数据
			 */
			getUserInfo: function(){
				let that = this
				let data = {}
					data.action = 'user_info'
					data.m = 'muu_minishop'
				//动态获取用户数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							console.log(res.data)
							that.userInfo = res.data.data
						}
					}
				})
			},
			
			// 1:1 裁切
			setOneToOne() {
				this.height = 280;
				this.width = 280;
				this.$nextTick(function() {
					this.$refs.cutImage.setCutPix();
				});
			},
			
			// 取消
			cancleCut() {
				this.cutShow = false;
			},
			
			// 选择头像
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (e) => {
						const tempFilePaths = e.tempFilePaths
						var image = tempFilePaths[0]
						this.cutImage = image
						this.cutShow = true
					},
				});
			},
			
			// 完成裁切
			cropper(e) {
				let that = this
				console.log(e)
				// #ifdef MP-WEIXIN
				let url = this.util.url('entry/wxapp/file',{
					m: 'muu_activity',
					action: 'upload'
				})
				// #endif
						
				// #ifdef H5
				let url = this.util.url('entry/site/file',{
					m: 'muu_activity',
					action: 'upload'
				})
				// #endif
				uni.showLoading({
					title: '上传中'
				})
				//console.log(e.url)
				
				uni.uploadFile({
					url: url,
					filePath: e.url,
					fileType: 'image',
					name: 'file',
					success: (res) => {
						console.log(res)
						const item = JSON.parse(res.data);
						this.cutShow = false;
						this.overImage = item.url
						this.uploadComelete();
						uni.hideLoading()
					},
					fail: (e) => {
						console.log('上传失败')
						uni.hideLoading()
						this.cutShow = false;
					},
				});
				
			},
			
			// 完成上传
			uploadComelete() {
				let that = this
				let avatar = this.overImage;
				//提交数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				this.util.request({
					url : url,
					data: {
						'action': 'avatar',
						'avatar': avatar,
					},
					method: 'POST',
					
					success: function (res) {
						//console.log(res.data);
						if (res.data.code == 200) {
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000,
								icon: 'none'
							});
							that.getUserInfo()
						}else{
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000,
								icon: 'none'
							});
						}
					}
				})
				
			},
			
			/**
			 * 更换头像
			 */
			avatar() {
				this.navigateTo('avatar')
			},
			
			/**
			 * 绑定手机号
			 */
			bindMobile: function(){
				this.navigateTo('bind?type=mobile')
			},
			
			/**
			 * 绑定邮箱
			 */
			bindEmail: function(){
				this.navigateTo('bind?type=email')
			},
			
			/**
			 * 修改昵称
			 */
			bindNickname: function(){
				this.navigateTo('nickname')
			},
			/**
			 * 修改真实姓名
			 */
			bindRealname: function(){
				this.navigateTo('realname')
			},
			/**
			 * 解密小程序端手机号码
			 * @param {Object} e
			 */
			decryptPhoneNumber: function(e) {
				let that = this
				console.log(e);    
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {    
					console.log('用户拒绝提供手机号');  
				}else{
					console.log('用户同意提供手机号');  
					//console.log(JSON.stringify(e.detail.encryptedData));    
					//console.log(JSON.stringify(e.detail.iv));   
					
					let encryptedData = e.detail.encryptedData;  
					let iv = e.detail.iv;
					let data = {}
						data.action = 'decrypt_mobile'
						data.m = 'muu_activity'
						data.iv = iv
						data.encryptedData = encryptedData
					//动态获取用户数据
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/ucenter'
						//#endif
						//#ifdef H5
						url = 'entry/site/ucenter'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								console.log(res.data)
								that.getUserInfo()
							}
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000,
								icon: 'none'
							});
						}
					})
				}
			},
			
			/**
			 * @param {Object} page
			 */
			navigateTo: function(page){
				let that = this
				let url = page
				console.log(url)
				let userInfo = uni.getStorageSync('userInfo') || {};
				if (userInfo.memberInfo) {
					uni.navigateTo({
						url: url
					});
				}else{
					this.login()
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.del {
		position: absolute;
		top: 0;
		right: 0;
		width: 50rpx;
		height: 50rpx;
		background: red;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		align-items: center;
		cursor: pointer;
	}
	
	.cut_pix {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 80rpx;
		left: 0;
		right: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	
	.pix_item {
		width: 180rpx;
		height: 60rpx;
		background: orange;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 28rpx;
	}
	
	.cut_con {
		position: relative;
	}
	
	
	.nav-view {
		position: relative;
		overflow: hidden;
		margin: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0,0,0,.05);
		background-color: #fff;
		border-radius: 10rpx;
	}
	.cell.avatar {
		.avatar-image {
			border-radius: 50%;
			width: 115rpx;
			height: 115rpx;
			display: block;
			z-index: 1;
		}
		.value {
			line-height: 115rpx;
			text-align: right;
		}
		.action {
			line-height: 115rpx;
			text-align: right;
		}
	}
	.cell {
		position: relative;
		display: flex;
		padding: 22rpx 10rpx 22rpx 30rpx!important;
		border-bottom: 2rpx solid #f8f8f8;
		.bind-mobile-btn {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			border: 0;
		}
		.icon {
			width: 48rpx;
		}
		.title {
			flex: 1;
			font-size: 28rpx;
			color: #666;
		}
		.value {
			width: 240rpx;
			text-align: right;
		}
		.action {
			width: 36rpx;
		}
		&:active {
			background-color: #f2f2f2;
		}
	}
	button.cell {
		background-color: #fff;
	}
	
	
	

</style>
